<template>
  <div style="padding: 10px; background-color: white; margin-top: 10px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="文章标题">
        <el-input v-model="form.title" placeholder="文章标题"></el-input>
      </el-form-item>

      <el-form-item label="文章封面">
        <!-- 展示图片相关 -->
        <uploadImg
          :limit="1"
          ref="coverImg"
          :isUpdate="rawId ? true : false"
          :keyName="'coverImg'"
        ></uploadImg>
      </el-form-item>

      <el-form-item label="文章内容">
        <!-- 富文本编辑器 -->
        <quillEdtor ref="text"></quillEdtor>
      </el-form-item>

      <!-- 保存按钮 -->
      <el-form-item style="margin-top: 10px">
        <el-button type="primary" size="medium" @click="saveBlog">
          {{ blogid ? "保存修改" : "立即发布" }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 上传图片
import uploadImg from "../../util/tool/upload";
// 富文本编辑器
import quillEdtor from "../../util/tool/quillEditor";
// 获取当前时间
import { getNowTime, getCoolePage, updateColl } from "../../util/time";
// 上传图片
import { uploadImage } from "../../util/uploadimg";
export default {
  components: {
    quillEdtor,
    uploadImg,
  },
  data() {
    return {
      rawId: false,
      form: {
        // 文章标题
        title: "",
        // 封面图片
        coverIamge: "",
        // 创建时间
        createTime: "",
        // 文章内容
        content: null,
      },
      blogid: "",
    };
  },
  mounted() {
    this.blogid = this.$router.history.current.query.id;
    if (this.blogid) {
      this.getBlogDetail();
    }
  },
  methods: {
    // 保存文章
    saveBlog() {
      // 获取文章内容
      this.form.content = this.$refs.text.getTextVal();
      if (!this.form.title) {
        this.$alert("标题不可为空");
        return;
      }
      if (!this.form.content) {
        this.$alert("内容不能为空");
        return;
      }
      // 获取封面地址图
      let coverImg = this.$refs.coverImg.retImgUrls();     

      // 选择有封面时上传封面图片
      if (coverImg.length) {
        // 判断是否为自动回填的封面图
        if (!coverImg[0].raw) {
          this.form.coverIamge = coverImg.url;
          this.submitBlog();
        } else {
          // 先上传封面图片
          uploadImage("myBlog", coverImg[0].raw).then((coverimg) => {
            if (coverimg.fileList[0].tempFileURL) {
              this.form.coverIamge = coverimg.fileList[0].tempFileURL;
              this.submitBlog();
            }
          });
        }
      } else {
        // 没有选择封面图时给一个默认的地址
        this.form.coverIamge =
          "https://737a-szx-blog-6g3uau7395492b88-1257342648.tcb.qcloud.la/myBlog/1616393833909_previewFix.jpg";
        this.submitBlog();
      }
    },
    // 保存数据
    submitBlog() {
      // 获取当前时间
      this.form.createTime = getNowTime();
      // 如果有文章id，则执行更新方法
      if (this.blogid) {
        // 更新方法
        this.updateBlog();
        return;
      }
      // 调用数据库，保存博客
      var db = this.$wxApp.database();
      // 保存内容至数据库
      db.collection("myBlogList")
        .add(this.form)
        .then((res) => {
          if (res.id) {
            // 提示添加成功
            this.$confirm("添加成功!", "提示", {
              confirmButtonText: "确定",
              type: "success",
              showCancelButton: false,
            }).then(() => {
              this.$router.go(-1);
            });
          } else {
            this.$message.error("添加失败，请重试");
          }
        });
    },
    // 根据文章id获取文章详情
    getBlogDetail() {
      getCoolePage("myBlogList", 1, 1, {
        _id: this.blogid,
      }).then((res) => {
        let resdata = res.data[0];
        // 赋值标题
        this.form.title = resdata.title;
        // 赋值文章内容
        this.$refs.text.setTextVal(resdata.content);
        // 赋值封面图
        this.$refs.coverImg.setImgUrls([
          {
            url: resdata.coverIamge,
          },
        ]);
      });
    },
    // 更新方法
    updateBlog() {
      updateColl("myBlogList", this.blogid, this.form).then((res) => {
        // 提示添加成功
        this.$confirm("修改成功!", "提示", {
          confirmButtonText: "确定",
          type: "success",
          showCancelButton: false,
        }).then(() => {
          this.$router.go(-1);
        });
      });
    },
  },
};
</script>

<style scoped>
.content-label {
  font-size: 14px;
  color: rgb(96, 98, 102);
  margin-bottom: 10px;
  margin-top: -10px;
}
</style>